<template>
  <div class="aside">
    <h2>相关攻略</h2>
    <div class="container" v-for="(item,index) in recommendList" :key="index">
      <div class="pic">
        <img src="@/assets/pic_sea.jpeg" />
      </div>
      <div class="content">
        <h4>{{item.title}}</h4>
        <div class="info">
          <span>{{item.created_time | changeTime}}</span>
          <span v-if="item.watch == null">阅读 0</span>
          <span v-else>阅读 {{item.watch}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment"
export default {
    data(){
        return{
            recommendList:[],
        }

    },
    mounted(){
        this.$axios({
            url:"/posts/recommend",
            params:this.$route.query
        }).then(res=>{
            const {data} = res.data;
            console.log(data);
            this.recommendList = data;
        })
    },
    filters:{
        changeTime(value){
            return  moment((value)).format(`YYYY-MM-DD  hh:mm`);
        }
    }
};
</script>

<style lang="less" scoped>
h2{
    font-weight: 400;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.container {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
  .pic {
    img {
      width: 100px;
      height: 80px;
      flex-shrink: 0;
      background: #ddd;
      overflow: hidden;
      margin-right: 10px;
    }
  }
  .content{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
}
</style>
